<template>
    <div>
        <div class="logo">
            <van-nav-bar title="账号密码登录" left-text="返回" right-text="注册" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <van-form @submit="onSubmit">
                <van-field v-model="mobile" name="mobile" label="手机号" placeholder="手机号"
                    :rules="[{ pattern, message: '请填写正确的手机号' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button square block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import {
        Form,
        Field,
        Button,
        Toast,
        NavBar
    } from "vant";

    Vue.use(NavBar);
    Vue.use(Form);
    Vue.use(Field);
    Vue.use(Button);
    Vue.use(Toast);
    export default {
        data() {
            return {
                mobile: "",
                password: "",
                pattern: /^1[3-9]\d{9}$/,
            };
        },
        methods: {
            onSubmit(values) {
                this.$http.post("http://127.0.0.1:2004/backend/login", values)
                    .then(ret => {
                        if (ret.error_code == 0) {
                            Toast.success("登陆成功！");
                            this.$router.go(-1);
                        } else {
                            Toast.fail("登录失败！");
                        }
                    });
            },
            onClickLeft() {
                this.$router.go(-1);
            },
        },
        created() {
            this.$store.commit("global/setFooter", false)
        },
        beforeDestroy() {
            this.$store.commit("global/setFooter", true)
        }
    };
</script>

<style lang="scss" scoped>
    .logo {
        text-align: center;
    }

    .content {
        margin-top: 20px;
    }
</style>